<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Luxury Hotel Booking Widget Flat Responsive Widget Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>
    <link href="http://localhost:8080/SingleBook/css/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="http://localhost:8080/SingleBook/css/bootstrap.css" rel='stylesheet' type='text/css' media="all">
    <script src="http://localhost:8080/SingleBook/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:8080/SingleBook/js/move-top.js"></script>
    <script type="text/javascript" src="http://localhost:8080/SingleBook/js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
</head>
<body>
<form th:action="@{/users/insertOrder}">
    <div class="header">
        <h1 th:text="${hotlename}">酒店名</h1>
        <input name="hotlename" th:value="${hotlename}" style="display:none"/>
    </div>

    <div class="banner-top">
        <h2>填写预定信息</h2>
        <div class="banner-bottom">
            <div class="bnr-one">
                <div class="bnr-left">
                    <p>入住时间</p>
                </div>
                <div class="bnr-right">
                    <input autocomplete="off"  name="liveIn" class="date" id="date" type="date" >
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="bnr-one">
                <div class="bnr-left">
                    <p>离开时间</p>
                </div>
                <div class="bnr-right">
                    <input autocomplete="off"  name="liveOut" class="date" id="date1" type="date" >
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="bnr-one">
                <div class="bnr-left">
                    <p>手机号码</p>
                </div>
                <div class="bnr-right">
                    <input name="phone" type="text" value="" onclick="timer();"/>
                    <!--<select>-->
                    <!--<option  class="rm" value="volvo">0</option>-->
                    <!--<option  class="rm" value="saab">1</option>-->
                    <!--<option  class="rm" value="opel">2</option>-->
                    <!--<option  class="rm" value="audi">3 or 3+</option>-->
                    <!--</select>-->
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="bnr-one">
                <div class="bnr-left">
                    <p>客户</p>
                </div>
                <div class="bnr-right">
                    <input  type="text" th:value="${users}" disabled="disabled"/>
                    <input name="username" th:value="${users}" style="display:none"/>
                    <!--<select>-->
                    <!--<option value="volvo">Select a type</option>-->
                    <!--<option value="saab">Single</option>-->
                    <!--<option value="opel">Double</option>-->
                    <!--<option value="audi">Suite</option>-->
                    <!--</select>-->
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="bnr-one">
                <div class="bnr-left">
                    <p>价格</p>
                    <span id="price1" style="display:none" th:text="${roomPrice}"></span>
                </div>
                <div class="bnr-right">
                    <input id="price" type="text" value="￥0" disabled="disabled"/>
                    <input id="roomPrice" name="roomPrice" type="text" value="￥0" style="display:none"/>
                    <!--<select>-->
                    <!--<option  class="rm" value="volvo">0</option>-->
                    <!--<option  class="rm" value="saab">1</option>-->
                    <!--<option  class="rm" value="opel">2</option>-->
                    <!--<option  class="rm" value="audi">3 or 3+</option>-->
                    <!--</select>-->
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="bnr-one">
                <div class="bnr-left">
                    <p>房型</p>
                </div>
                <div class="bnr-right">
                    <input  type="text" th:value="${roomType}" disabled="disabled"/>
                    <input name="roomType" th:value="${roomType}" style="display:none"/>
                    <!--<select>-->
                    <!--<option value="volvo">Select a type</option>-->
                    <!--<option value="saab">Single</option>-->
                    <!--<option value="opel">Double</option>-->
                    <!--<option value="audi">Suite</option>-->
                    <!--</select>-->
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="bnr-btn">

                <input type="submit" value="预定" style="margin-left:30%">

            </div>

        </div>

        <!---start-date-piker---->
        <link rel="stylesheet" href="http://localhost:8080/SingleBook/css/jquery-ui.css"/>
        <script src="http://localhost:8080/SingleBook/js/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
                $("#datepicker1").datepicker();

            });


        </script>
        <script>
            function timer() {
                // alert(new Date(document.getElementById('datepicker1').value));
                var ts = new Date(document.getElementById('date1').value) - new Date(document.getElementById('date').value);
                // var ts = (new Date(2014, 9, 1, 0, 0, 0)) - (new Date());//计算bai剩余du的毫秒数      
                // alert(ts);
                var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数      
                // var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数      
                // var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数      
                // var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数      
                dd = checkTime(dd);
                // hh = checkTime(hh);
                // mm = checkTime(mm);
                // ss = checkTime(ss);
                // alert(document.getElementById("price1").innerHTML);
                document.getElementById("price").value = '￥' + parseInt(document.getElementById("price1").innerHTML) * parseInt(dd);
                document.getElementById("roomPrice").value = '￥' + parseInt(document.getElementById("price1").innerHTML) * parseInt(dd);
                // document.getElementById("price1").innerText=dd;
                // alert(dd);
                // setInterval("timer()",1000);      //注释此行zhi，不进行倒计时显示
            }

            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        </script>
         
        <!---/End-date-piker---->
    </div>
</form>
<!--<div class="footer">-->
<!--<p>Copyright © Luxury Hotel Booking. All Rights Reserved | Design by <a href="http://xmoban.cn" target="_blank">xmoban.cn</a></p>-->
<!--</div>-->
</body>
</html>